<template>
  <view class="container">
    <view class="achievement-card">
      <view class="achievement-header">
        <view class="achievement-title">{{ achievement.title }}</view>
        <u-tag 
          v-if="achievement.isPublic === 1"
          text="公开" 
          type="success"
        ></u-tag>
        <u-tag 
          v-else
          text="私密" 
          type="info"
        ></u-tag>
      </view>
      
      <view class="achievement-content">
        <view class="content-item">
          <view class="item-label">成果描述</view>
          <view class="item-value">{{ achievement.description || '暂无描述' }}</view>
        </view>
        
        <view class="content-item" v-if="achievement.categoryId !== -1">
          <view class="item-label">所属分类</view>
          <view class="item-value">{{ getCategoryName() }}</view>
        </view>
        
        <view class="content-item" v-if="tags.length > 0">
          <view class="item-label">标签</view>
          <view class="tags-list">
            <u-tag 
              v-for="(tag, index) in tags" 
              :key="index" 
              :text="tag" 
              plain
            ></u-tag>
          </view>
        </view>
        
        <view class="content-item" v-if="achievement.completionDate">
          <view class="item-label">完成日期</view>
          <view class="item-value">{{ formatDate(achievement.completionDate) }}</view>
        </view>
        
        <view class="content-item">
          <view class="item-label">创建时间</view>
          <view class="item-value">{{ formatDate(achievement.createTime) }}</view>
        </view>
        
        <view class="content-item">
          <view class="item-label">更新时间</view>
          <view class="item-value">{{ formatDate(achievement.updateTime) }}</view>
        </view>
      </view>
    </view>
    
    <view class="action-buttons">
      <u-button type="primary" @click="goEdit">编辑</u-button>
      <u-button type="error" @click="confirmDelete">删除</u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { formatDate } from '@/utils/date'

export default {
  data() {
    return {
      id: null,
      tags: []
    }
  },
  computed: {
    ...mapGetters({
      achievement: 'achievement/currentAchievement',
      achievementCategories: 'category/achievementCategories'
    })
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.loadData()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    ...mapActions('achievement', ['getAchievementDetail', 'deleteAchievement']),
    ...mapActions('category', ['getCategoryList']),
    formatDate,
    
    // 加载数据
    async loadData() {
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        await this.getCategoryList(3) // 获取成果分类列表，类型为3
        await this.getAchievementDetail(this.id)
        this.parseTags()
      } catch (error) {
        console.error('加载数据失败', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } finally {
        uni.hideLoading()
      }
    },
    
    // 解析标签
    parseTags() {
      if (!this.achievement || !this.achievement.tags) {
        this.tags = []
        return
      }
      
      try {
        if (typeof this.achievement.tags === 'string') {
          this.tags = JSON.parse(this.achievement.tags)
        } else {
          this.tags = this.achievement.tags
        }
        
        if (!Array.isArray(this.tags)) {
          this.tags = []
        }
      } catch (error) {
        console.error('解析标签失败', error)
        this.tags = []
      }
    },
    
    // 获取分类名称
    getCategoryName() {
      if (!this.achievement || this.achievement.categoryId === -1) {
        return '未分类'
      }
      
      const category = this.achievementCategories.find(item => item.id === this.achievement.categoryId)
      return category ? category.name : '未分类'
    },
    
    // 去编辑页面
    goEdit() {
      uni.navigateTo({
        url: `/pages/achievement/edit?id=${this.id}`
      })
    },
    
    // 确认删除
    confirmDelete() {
      uni.showModal({
        title: '提示',
        content: '确定要删除该成果记录吗？',
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中...'
            })
            
            try {
              await this.deleteAchievement(this.id)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/achievement/index'
                })
              }, 1500)
            } catch (error) {
              console.error('删除失败', error)
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            } finally {
              uni.hideLoading()
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.achievement-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.achievement-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.achievement-content {
  padding: 10rpx 0;
}

.content-item {
  margin-bottom: 30rpx;
}

.item-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.item-value {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
}

.u-tag {
  margin-right: 16rpx;
  margin-bottom: 10rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.u-button {
  width: 45%;
}
</style> 